/* 主版式 */
Vue.component('zb-main', {
  template: `
    <div class="common-content" :class="{ 'common-content--head': head, 'common-content--foot': foot }">
      <div v-if="head" class="common-head" :style="{ backgroundColor: color }">
        <div class="logo">
          <a href="index.html" class="logo-box">
            <img v-if="type === '1'" src="./assets/images/icon/logo.png" alt="">
            <img v-else :src="logo" class="logo-2" alt="">
          </a>
          <slot name="extra" />
        </div>
        <div class="phone-btn">
          <img v-if="type === '1'" src="./assets/images/icon/phone.png" alt="">
          <img v-else src="./assets/images/icon/phone-2.png" alt="">
          <div class="phone" :style="{ color: type === '2' ? '#FFFFFF' : '' }">400-823-0180</div>
        </div>
        <div class="menu-btn" @click="openSlider">
          <img v-if="type === '1'" src="./assets/images/icon/menu.png" alt="">
          <img v-else src="./assets/images/icon/menu-2.png" alt="">
        </div>
      </div>
      <slot></slot>
      <div class="bottom-infos" :style="{ backgroundColor: white ? '#fff' : '' }">
        <div class="infos">
          <div class="info">联系电话：<span>4008230180</span></div>
          <div class="info">版权所有：北京智途教育科技有限公司</div>
        </div>
      </div>
      <div v-if="foot" class="common-tabbar">
        <a href="index.html" class="item">
          <img src="./assets/images/icon/home.png" alt="" class="icon">
          <div class="name">首页</div>
        </a>
        <a href="quickSelection.html" class="item">
          <img src="./assets/images/icon/school.png" alt="" class="icon">
          <div class="name">院校</div>
        </a>
        <a href="openDay.html" class="item">
          <img src="./assets/images/icon/day.png" alt="" class="icon">
          <div class="name">开放日</div>
        </a>
        <a @click="onlineService" class="btn">在线咨询</a>
      </div>

      <div class="common-slider" v-if="visible">
        <div class="bg" @click="closeSlider"></div>
        <div class="slider-wrapper clearfix">
          <a href="index.html" class="back">
            <div class="arrow"></div>
            <div class="name">首页</div>
          </a>
          <img src="./assets/images/index/bg-3.png" alt="" class="photo">
          <div class="navs">
            <div v-for="(item,index) in navs" :key="index" class="item">
              <a v-if="item.href" class="main" :href="item.href">
                <img :src="item.icon" alt="">
                <span>{{item.name}}</span>
              </a>
              <div v-else class="main" @click="updateNav(index)">
                <img :src="item.icon" alt="">
                <span>{{item.name}}</span>
              </div>
              <div v-if="item.list && item.list.length > 0 && activeNav === index" class="sub">
                <a v-for="(sub,idx) in item.list" :key="idx" :href="sub.href">{{sub.name}}</a>
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="tel">客服电话：4008230180</div>
            <img class="icon" src="./assets/images/icon/logo.png" alt="">
          </div>
        </div>
      </div>

    </div>
  `,
  props: {
    logo: {
      type: String,
      default: ''
    },
    white: {
      type: Boolean,
      default: false
    },
    head: {
      type: Boolean,
      default: true
    },
    foot: {
      type: Boolean,
      default: true
    },
    color: {
      default: '#fff'
    },
    type: {
      type: String,
      default: '1'
    }
  },
  data() {
    return {
      navs: [
        {
          icon: './assets/images/index/nav-1.png',
          name: '国际学校',
          list: [
            { name: '国际小学', href: 'internationalPrimarySchool.html' },
            { name: '国际初中', href: 'internationalMiddleSchool.html' },
            { name: '国际高中', href: 'internationalHighSchool.html' },
            { name: '国际幼儿园', href: 'internationalKindergartenSchool.html' }
          ]
        }, {
          icon: './assets/images/index/nav-2.png',
          name: '私立学校',
          list: [
            { name: '私立小学', href: 'privatePrimarySchool.html' },
            { name: '私立初中', href: 'privateMiddleSchool.html' },
            { name: '私立高中', href: 'privateHighSchool.html' }
          ]
        }, {
          icon: './assets/images/index/nav-3.png',
          name: '热门推荐',
          href: 'openDay.html'
        }, {
          icon: './assets/images/index/nav-4.png',
          name: '快速择校',
          href: 'quickSelection.html'
        }, {
          icon: './assets/images/index/nav-5.png',
          name: '报考资格测评',
          href: 'evaluationApplication.html'
        }
      ],
      activeNav: null,
      visible: false
    }
  },
  methods: {
    updateNav(activeNav) {
      if (this.activeNav === activeNav) {
        this.activeNav = null
      } else {
        this.activeNav = activeNav
      }
    },
    openSlider() {
      this.activeNav = null
      this.visible = true
      document.documentElement.style.overflow = 'hidden'
    },
    closeSlider() {
      this.visible = false
      document.documentElement.style.overflow = ''
    }
  }
})

/* 快速申请通道 */
Vue.component('quick-apply', {
  template: `
    <div class="quick-application-channel">
      <div class="form">
        <div class="title">快速申请通道</div>
        <div class="label">
          <van-row gutter="15">
            <van-col span="12">
              <div class="form-item">
                <div class="ipt"><input v-model.trim="payload.studentName" type="text" placeholder="学生姓名："></div>
              </div>
            </van-col>
            <van-col span="12">
              <div class="form-item" @click="showSexPicker = true">
                <div class="ipt"><input v-model="sexStr" type="text"  :value="sexStr" placeholder="学生性别：" readonly></div>
                <img src="./assets/images/index/expand.png" alt="" class="arrow">
              </div>
            </van-col>
          </van-row>
        </div>
        <div class="label">
          <van-row gutter="15">
            <van-col span="12">
              <div class="form-item" @click="showSchoolPicker = true">
                <div class="ipt"><input type="text" :value="schoolName" placeholder="意向学校：" readonly></div>
                <img src="./assets/images/index/expand.png" alt="" class="arrow">
              </div>
            </van-col>
            <van-col span="12">
              <div class="form-item" @click="showDatePicker = true">
                <div class="ipt"><input v-model="payload.birthDay" type="text" placeholder="出生日期：" readonly></div>
              </div>
            </van-col>
          </van-row>
        </div>
        <div class="form-item label">
          <div class="ipt"><input v-model.trim="payload.mobile" type="tel" placeholder="请输入您的联系方式（必填）"></div>
        </div>
        <button class="btn" type="button" @click="handleConfirm">提交信息</button>
      </div>

      <van-popup v-model="showSexPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="sexList"
          value-key="label"
          @cancel="showSexPicker = false"
          @confirm="onSexConfirm"
        />
      </van-popup>
      
      <van-popup v-model="showSchoolPicker" round position="bottom">
        <van-picker
          show-toolbar
          :columns="intentionalSchools"
          value-key="name"
          @cancel="showSchoolPicker = false"
          @confirm="onSchoolConfirm"
        />
      </van-popup>

      <van-popup v-model="showDatePicker" round position="bottom">
        <van-datetime-picker
          type="date"
          v-model="currentDate"
          :min-date="minDate"
          @cancel="showDatePicker = false"
          @confirm="onDatePicker"
        />
      </van-popup>

    </div>
  `,
  data() {
    return {
      payload: {
        studentName: '',
        sex: '',
        schoolId: '',
        birthDay: '',
        mobile: ''
      },
      sexList: [
        { label: '男', value: 1 },
        { label: '女', value: 2 },
      ],
      showSexPicker: false,
      showSchoolPicker: false,
      showDatePicker: false,
      currentDate: new Date(),
      // 意向学校
      intentionalSchools: [
        { id: '1001', name: '北京市朝阳区赫德学校' },
        { id: '1002', name: '北京市朝阳区凯文学校' },
        { id: '1003', name: '哈罗北京' },
        { id: '1004', name: '北京德闳学校' },
        { id: '1005', name: '北京市朝阳区北外同文外国语' },
        { id: '1006', name: '北京爱迪国际学校' },
        { id: '1007', name: '北京外国语大学国际课程中心' },
        { id: '1008', name: '领科教育北京校区' },
        { id: '1009', name: '青苗学校' },
      ],
      minDate: new Date(1900, 0, 1),
    }
  },
  computed: {
    sexStr() {
      if (this.payload.sex) {
        return this.sexList.find(v => v.value === this.payload.sex).label
      }
      return ''
    },
    schoolName() {
      if (this.payload.schoolId) {
        return this.intentionalSchools.find(v => v.id === this.payload.schoolId).name
      }
      return ''
    }
  },
  methods: {
    onSexConfirm(e) {
      console.log(e)
      this.payload.sex = e.value
      this.showSexPicker = false
    },
    onSchoolConfirm(e) {
      this.payload.schoolId = e.id
      this.showSchoolPicker = false
    },
    onDatePicker(e) {
      const dateStr = e.toLocaleString()
      const date = dateStr.split(' ')[0].split('/')
      date[1] = Number(date[1]) < 10 ? '0' + date[1] : date[1]
      date[2] = Number(date[2]) < 10 ? '0' + date[2] : date[2]
      this.payload.birthDay = date.join('-')
      this.showDatePicker = false
    },
    // 确认消息
    handleConfirm() {
      if (this.payload.mobile === '') {
        vant.Notify({ type: 'warning', message: '请输入联系方式', duration: 1500 })
        return
      }
      if (!commonRegulars.mobile.test(this.payload.mobile)) {
        vant.Notify({ type: 'warning', message: '请输入正确的联系方式', duration: 1500 })
        return
      }
      console.log(this.payload)
    }
  }
})

/* 首页标题栏 */
Vue.component('index-title', {
  template: `
    <div class="common-title" :style="{
      paddingTop: top,
      paddingBottom: bottom
    }">
      <div class="line"></div>
      <div class="title">{{title}}</div>
      <a v-if="type === '2'" :href="href" class="intro-2"><slot /></a>
      <div v-else class="intro-1"><slot /></div>
    </div>
  `,
  props: {
    title: String,
    type: {
      type: String,
      default: '1'
    },
    top: String,
    bottom: String,
    href: String
  }
})


// 学校费用
Vue.component('school-fee', {
  template: `
    <div v-if="visible" class="school-fee-modal">
      <div class="bg" @click="closeModal"></div>
      <div class="wrapper">
        <div class="head">
          <div class="title">北京德闳学校<span>学费导读</span></div>
          <div class="label">国际班</div>
          <div class="close" @click="closeModal"></div>
        </div>
        <div class="content">
          <p>北京德闳学校隶属于德闳教育集团，与北京德威学校为姐妹学校。北京的德闳学校是专为中国学生量身打造的一贯制国际化双语学校。北京德闳学校拥有国内最为顶尖的教育资源以及硬件条件，意向报考家庭比较关注北京德闳学校学费收取情况。今天，就带大家详细了解一下北京德闳学校学费收取以及学校奖学金等说明，可供择校参考。</p>
          <div class="border"></div>
          <div class="title">北京德闳学校学费收取</div>
          <p>以下学费标准为学校2023-2024年学费收取标准，<span style="color:#FF4E51">北京德闳学校</span>现阶段招生年级为幼儿园（小、中、大班）以及小学、高中，各年级段学费收取不同，需根据意向申请的年级段进行了解。</p>
          <p>幼儿园小班：<span style="color:#013DFF">21.8万/年（按年支付）、10.9万/半年（按学期支付）</span></p>
          <p>幼儿园中班：<span style="color:#013DFF">21.8万/年（按年支付）、10.9万/半年（按学期支付）</span></p>
          <p>幼儿园大班：<span style="color:#013DFF">24.3万/年（按年支付）、12.1万/半年（按学期支付）</span></p>
          <p>小学部：<span style="color:#013DFF">26.3万/年（按年支付）、13.1万/半年（按学期支付）</span></p>
          <p>高中部：<span style="color:#013DFF">28.8万/年（按年支付）、14.4万/半年（按学期支付）</span></p>
          <p>其他费用：<span style="color:#013DFF">住宿7.5万/年（仅高中提供寄宿）餐费刷卡，校服2500年</span></p>
        </div>
        <div class="foot">
          <div class="btn" @click="onlineService">咨询一下</div>
        </div>
      </div>
    </div>
  `,
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    onlineService() {
      onlineService()
    },
    closeModal() {
      document.documentElement.style.overflow = ''
      this.$emit('update:visible', false)
    }
  },
  watch: {
    visible(v) {
      if (v) {
        document.documentElement.style.overflow = 'hidden'
      }
    }
  }
})